/*
 * @Title: 底部菜单
 * @Created by: ycq 
 */
<template>
	<view id="bottom" class="foot-menu">
		<view class="foot-menu-area">
			<view class="foot-menu-item" v-for="(nav,index) in menuData" :key='index' @click='chooseMenu(nav.url,index)' >
				<view class="foot-menu-img">
					<img v-if='navIndex != index'  :src='nav.img' alt=""  >
					<img v-if='navIndex == index'  :src='nav.imga' alt=""  >
				</view>
				<span :class="navIndex == index ? 'active':''">{{nav.name}}</span>
			</view>
		</view>
	</view>
</template>

<script>
	console.log('')
	export default{
		props: ['navIndex'],
		data(){
			return{
				tabbar: true,
				windowHeight: '',
				pageType:0,
				isActive:false,
				menuData:[
					{	
						id:0,
						name:'首页',
						img:'/static/shop/b-shop-2.png',
						imga:'/static/shop/b-shop.png',
						url:'shop',
					},
					{
						id:1,
						name:'购物车',
						img:'/static/shop/b-car-2.png',
						imga:'/static/shop/b-car.png',
						url:'buyCar',
					},
					// {
					// 	id:4,
					// 	name:'我的',
					// 	img:'/static/shop/b-my-2.png',
					// 	imga:'/static/shop/b-my.png',
					// 	url:'my',
					// }
				]
			}
		},
		methods:{
			chooseMenu(path,index){
				this.pageType = index
				uni.navigateTo({
					url:path
				})
			}
		},
		created() {
			if(this.navIndex!=''||this.navIndex!=null){
				this.pageType = this.navIndex
			}
		}
		
	}
</script>

<style scoped>
	.foot-menu{
		width: 100%;
		height: 98upx;
		background: #FFFFFF;
		border-top: rgba(0,0,0,0.1) solid 0.5upx;
		position: fixed;
		z-index: 30;
		bottom: 0;
	}
	.foot-menu-area{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction:row
	}
	.foot-menu-item{
		width: 100%;
		padding: 2vw 0;
		text-align: center;
	}
	.foot-menu-item img{
		width: 51upx;
		height: 51upx;
	}
	.foot-menu-item span{
		display: block;
		width: 100%;
		text-align: center;
		font-size: 3vw;
	}
	.active{
		color: #1C8EFF;
	}
	.foot-menu-img{
		width: 100%;
		height: 50upx;
	}
</style>
